<template>
	<view class="invoice">
		<view class="invoice_box public_sty">
			<view class="inv_type">
				<text class="ident">*</text>
				<text>发票类型</text>
				<view class="inv_type_tag">
					<uni-tag v-for="(item, index) in invTypelist" :key="index" :text="item.tagText" :type="invType == item.id ? 'success' : 'default'" inverted="true" @click="invTag(item.id)"></uni-tag>
				</view>
				<view class="inv_remarks"><text>电子发票与纸质发票具有同等法律效力、可以支持报销入账</text></view>
			</view>
			<view class="rise_type">
				<text class="ident">*</text>
				<text>抬头类型</text>
				<view class="rise_type_tag">
					<uni-tag v-for="(item, index) in risetypelist" :key="index" :text="item.tagtext" :type="risetype == item.id ? 'success' : 'default'" inverted="true" @click="riseTag(item.id)"></uni-tag>
				</view>
			</view>
			<view class="infor_box" v-for="(item, index) in invinfor" :key="index">
				<view :class="item.id == 6 ? 'infor_cons' : 'infor_con'">
					<view class="ident" v-if="item.required"><text>*</text></view>
					<text :class="item.required ? '' : 'indent_sty'">{{ item.label }}</text>
				</view>
				<view class="" style="width: 70%;">
					<uni-easyinput
						v-if="item.type == 0 ? true : false"
						v-model="item.value"
						:placeholder="item.placeholder"
						type="text"
						:suffixIcon="index == 0 ? 'arrowright' : ''"
						placeholderStyle="color:#C0C0C0"
						@blur="inputChecked"
						@focus="focus(item.id)"
					/>
					<radio-group name="" @click="radioCheck(index)" v-else>
						<label class="radio"><radio :value="item.value" style="transform:scale(0.8)" :checked="item.checkStatus" /></label>
					</radio-group>
				</view>
			</view>
			<view class="inv_remarks" v-if="risetype==1&&invType==0?true:false">
				<text>纸质发票将在七天内即送至您所填报的地址，请注意查收</text>
			</view>
		</view>
		<button class="btn" type="primary" @click="submit"><text>提交申请</text></button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			invData: {
				invoicehead:'',
				dutyparag:'',
				bankdeposit:'',
				bankaccount:'',
				busAddress:'',
				busPhone:'',
				defaultSta:''
			},
			invContent: '',
			invTypelist: [
				{
					id: 0,
					tagText: '增值税纸质发票'
				},
				{
					id: 1,
					tagText: '电子发票'
				}
			],
			invType: 0,
			risetypelist: [
				{
					id: 0,
					tagtext: '个人或事业单位'
				},
				{
					id: 1,
					tagtext: '企业'
				}
			],
			risetype: 1,
			invinfor: [
				{
					id: 0,
					value: '',
					type: 0,
					label: '支票抬头',
					required: true,
					placeholder: '填写需要开具发票的企业名称'
				},
				{
					id: 1,
					value: '',
					type: 0,
					label: '税号',
					required: true,
					placeholder: '纳税人识别号'
				},
				{
					id: 2,
					value: '',
					type: 0,
					label: '开户银行',
					required: false,
					placeholder: '选填'
				},
				{
					id: 3,
					value: '',
					type: 0,
					label: '银行账号',
					required: false,
					placeholder: '选填'
				},
				{
					id: 4,
					value: '',
					type: 0,
					label: '企业地址',
					required: false,
					placeholder: '选填'
				},
				{
					id: 5,
					value: '',
					type: 0,
					label: '企业电话',
					required: false,
					placeholder: '选填'
				},
				{
					id: 6,
					value: '',
					type: 1,
					label: '设置为默认抬头',
					required: false,
					placeholder: '',
					checkStatus: false
				}
			]
		};
	},
	methods: {
		submit(){
			
		},
		invTag(idx){
			this.invType = idx
		},
		riseTag(idx){
			this.risetype = idx
		},
		focus(id) {
			this.invContent = id
		},
		inputChecked(e) {
			let val = e.detail.value;
			if (!val || val == '') {
				return '';
			}
			
			if(this.invContent==0){
				this.invData.invoicehead = val
			}else if(this.invContent == 1){
				this.invData.dutyparag = val
			}else if(this.invContent == 2){
				this.invData.bankdeposit = val
			}else if(this.invContent == 3){
				this.invData.bankaccount = val
			}else if(this.invContent == 4){
				this.invData.busAddress = val
			}else if(this.invContent == 5){
				this.invData.busPhone = val
			}
		},
		radioCheck(idx) {
			// console.log(idx)
			this.invinfor[idx].checkStatus = !this.invinfor[idx].checkStatus
			this.invData.defaultSta = this.invinfor[idx].checkStatus
		},
	}
};
</script>

<style lang="scss" scoped>
.invoice {
	background-color: #f9faf9;
	padding: 30rpx;
}
.invoice_box {
	padding: 30rpx;
	color: #333333 !important;
	margin-bottom: 84rpx;
	.inv_type {
	}
}
.inv_type_tag,
.rise_type_tag {
	margin: 24rpx 0rpx;
}
/deep/ .uni-tag {
	border-radius: 16rpx !important;
	font-size: 28rpx !important;
	padding: 0px 20rpx;
	margin-right: 24rpx;
}
/deep/ .uni-tag--default {
	color: #bababa;
	background: none !important;
	border: 1px solid #c0c0c0 !important;
}
.ident {
	color: #ff5f42;
}
.inv_remarks {
	font-size: 24rpx;
	color: #999999;
	font-weight: 500;
	text-align: center;
}
.rise_type {
	margin: 24px 0px 29px 0rpx;
}
.infor_box {
	display: flex;
	margin: 30rpx 0px;
	align-items: center;
	
	.infor_con {
		width: 30%;
		display: flex;
	}
	.infor_cons {
		width: 45%;
		display: flex;
	}
}
.indent_sty {
	margin-left: 10rpx;
}
/deep/ .uni-easyinput__content-input {
	text-align: right;
	border: none;
	color: #c0c0c0;
}
/deep/ .is-input-border {
	border: none !important;
}
.radio {
	float: right;
}
.btn {
	margin-bottom: 40rpx;
	border-radius: 20rpx;
	text {
		font-size: 28rpx;
	}
}
</style>
